<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类分析 - 新闻分析系统</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        .category-card {
            transition: transform 0.2s;
        }
        .category-card:hover {
            transform: translateY(-5px);
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container">
        <a class="navbar-brand" href="/">新闻分析系统</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/news">新闻列表</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/analysis/hot">热度分析</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="/analysis/category">分类分析</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/analysis/sentiment">情感分析</a>
                </li>
            </ul>
            <form class="d-flex" action="/news/search" method="GET">
                <input class="form-control me-2" type="search" placeholder="搜索新闻..." name="keyword">
                <button class="btn btn-outline-light" type="submit">搜索</button>
            </form>
        </div>
    </div>
</nav>

<main class="container my-4">
    <div class="row">
        <!-- 分类分布图 -->
        <div class="col-lg-6 mb-4">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">新闻分类分布</h5>
                </div>
                <div class="card-body">
                    <canvas id="categoryDistributionChart" height="300"></canvas>
                </div>
            </div>
        </div>

        <!-- 分类热度对比 -->
        <div class="col-lg-6 mb-4">
            <div class="card shadow">
                <div class="card-header bg-danger text-white">
                    <h5 class="mb-0">分类热度对比</h5>
                </div>
                <div class="card-body">
                    <canvas id="categoryHotChart" height="300"></canvas>
                </div>
            </div>
        </div>

        <!-- 分类详情卡片 -->
        <div class="col-12">
            <div class="row">
                <div class="col-md-4 mb-4">
                    <div class="card shadow category-card">
                        <div class="card-body">
                            <h5 class="card-title">政治</h5>
                            <div class="d-flex justify-content-between mb-3">
                                <span>新闻数量</span>
                                <span class="badge bg-primary">42</span>
                            </div>
                            <div class="d-flex justify-content-between mb-3">
                                <span>平均热度</span>
                                <span class="badge bg-danger">84</span>
                            </div>
                            <div class="d-flex justify-content-between mb-3">
                                <span>更新频率</span>
                                <span class="badge bg-info">8/天</span>
                            </div>
                            <a href="/news/category/政治" class="btn btn-outline-primary btn-sm w-100">
                                查看详情
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card shadow category-card">
                        <div class="card-body">
                            <h5 class="card-title">军事</h5>
                            <div class="d-flex justify-content-between mb-3">
                                <span>新闻数量</span>
                                <span class="badge bg-primary">35</span>
                            </div>
                            <div class="d-flex justify-content-between mb-3">
                                <span>平均热度</span>
                                <span class="badge bg-danger">89</span>
                            </div>
                            <div class="d-flex justify-content-between mb-3">
                                <span>更新频率</span>
                                <span class="badge bg-info">6/天</span>
                            </div>
                            <a href="/news/category/军事" class="btn btn-outline-primary btn-sm w-100">
                                查看详情
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card shadow category-card">
                        <div class="card-body">
                            <h5 class="card-title">体育</h5>
                            <div class="d-flex justify-content-between mb-3">
                                <span>新闻数量</span>
                                <span class="badge bg-primary">58</span>
                            </div>
                            <div class="d-flex justify-content-between mb-3">
                                <span>平均热度</span>
                                <span class="badge bg-danger">92</span>
                            </div>
                            <div class="d-flex justify-content-between mb-3">
                                <span>更新频率</span>
                                <span class="badge bg-info">10/天</span>
                            </div>
                            <a href="/news/category/体育" class="btn btn-outline-primary btn-sm w-100">
                                查看详情
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card shadow category-card">
                        <div class="card-body">
                            <h5 class="card-title">科技</h5>
                            <div class="d-flex justify-content-between mb-3">
                                <span>新闻数量</span>
                                <span class="badge bg-primary">63</span>
                            </div>
                            <div class="d-flex justify-content-between mb-3">
                                <span>平均热度</span>
                                <span class="badge bg-danger">87</span>
                            </div>
                            <div class="d-flex justify-content-between mb-3">
                                <span>更新频率</span>
                                <span class="badge bg-info">12/天</span>
                            </div>
                            <a href="/news/category/科技" class="btn btn-outline-primary btn-sm w-100">
                                查看详情
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card shadow category-card">
                        <div class="card-body">
                            <h5 class="card-title">经济</h5>
                            <div class="d-flex justify-content-between mb-3">
                                <span>新闻数量</span>
                                <span class="badge bg-primary">47</span>
                            </div>
                            <div class="d-flex justify-content-between mb-3">
                                <span>平均热度</span>
                                <span class="badge bg-danger">82</span>
                            </div>
                            <div class="d-flex justify-content-between mb-3">
                                <span>更新频率</span>
                                <span class="badge bg-info">9/天</span>
                            </div>
                            <a href="/news/category/经济" class="btn btn-outline-primary btn-sm w-100">
                                查看详情
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card shadow category-card">
                        <div class="card-body">
                            <h5 class="card-title">教育</h5>
                            <div class="d-flex justify-content-between mb-3">
                                <span>新闻数量</span>
                                <span class="badge bg-primary">29</span>
                            </div>
                            <div class="d-flex justify-content-between mb-3">
                                <span>平均热度</span>
                                <span class="badge bg-danger">78</span>
                            </div>
                            <div class="d-flex justify-content-between mb-3">
                                <span>更新频率</span>
                                <span class="badge bg-info">5/天</span>
                            </div>
                            <a href="/news/category/教育" class="btn btn-outline-primary btn-sm w-100">
                                查看详情
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 分类新闻列表 -->
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header bg-info text-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">分类新闻列表</h5>
                        <div class="btn-group">
                            <button class="btn btn-sm btn-light">政治</button>
                            <button class="btn btn-sm btn-outline-light">军事</button>
                            <button class="btn btn-sm btn-outline-light">体育</button>
                            <button class="btn btn-sm btn-outline-light">科技</button>
                            <button class="btn btn-sm btn-outline-light">经济</button>
                            <button class="btn btn-sm btn-outline-light">教育</button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>标题</th>
                                <th>发布时间</th>
                                <th>来源</th>
                                <th>热度</th>
                                <th>情感倾向</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>
                                    <a href="/news/1" class="text-decoration-none">
                                        中国与欧盟举行第十轮经贸高层对话
                                    </a>
                                </td>
                                <td>2025-04-28 10:30</td>
                                <td>中国日报</td>
                                <td>
                                    <div class="progress" style="height: 6px;">
                                        <div class="progress-bar bg-danger"
                                             style="width: 85%"
                                             aria-valuenow="85"
                                             aria-valuemin="0"
                                             aria-valuemax="100">
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <i class="bi bi-emoji-smile text-success"></i>
                                    <span>正面</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="/news/2" class="text-decoration-none">
                                        美国总统签署新行政令加强网络安全
                                    </a>
                                </td>
                                <td>2025-04-27 14:15</td>
                                <td>华盛顿邮报</td>
                                <td>
                                    <div class="progress" style="height: 6px;">
                                        <div class="progress-bar bg-danger"
                                             style="width: 76%"
                                             aria-valuenow="76"
                                             aria-valuemin="0"
                                             aria-valuemax="100">
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <i class="bi bi-emoji-neutral text-warning"></i>
                                    <span>中性</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="/news/3" class="text-decoration-none">
                                        国务院召开经济形势分析会议
                                    </a>
                                </td>
                                <td>2025-04-26 09:45</td>
                                <td>新华社</td>
                                <td>
                                    <div class="progress" style="height: 6px;">
                                        <div class="progress-bar bg-danger"
                                             style="width: 91%"
                                             aria-valuenow="91"
                                             aria-valuemin="0"
                                             aria-valuemax="100">
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <i class="bi bi-emoji-smile text-success"></i>
                                    <span>正面</span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-dark text-light py-4 mt-5">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h5>新闻分析系统</h5>
                <p class="text-muted">提供多维度的新闻数据分析与可视化</p>
            </div>
            <div class="col-md-6 text-md-end">
                <p>&copy; 2025 新闻分析系统</p>
            </div>
        </div>
    </div>
</footer>

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // 分类数据
    const categoryData = [
        { name: '政治', count: 42 },
        { name: '军事', count: 35 },
        { name: '体育', count: 58 },
        { name: '科技', count: 63 },
        { name: '经济', count: 47 },
        { name: '教育', count: 29 },
        { name: '健康', count: 22 },
        { name: '娱乐', count: 38 }
    ];

    // 热度数据
    const categoryHotData = [
        { name: '政治', avgHot: 84 },
        { name: '军事', avgHot: 89 },
        { name: '体育', avgHot: 92 },
        { name: '科技', avgHot: 87 },
        { name: '经济', avgHot: 82 },
        { name: '教育', avgHot: 78 },
        { name: '健康', avgHot: 80 },
        { name: '娱乐', avgHot: 85 }
    ];

    // 分类分布图
    new Chart(document.getElementById('categoryDistributionChart'), {
        type: 'pie',
        data: {
            labels: categoryData.map(d => d.name),
            datasets: [{
                data: categoryData.map(d => d.count),
                backgroundColor: [
                    '#007bff', '#28a745', '#dc3545', '#ffc107',
                    '#17a2b8', '#6c757d', '#6610f2', '#fd7e14'
                ]
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'right'
                }
            }
        }
    });

    // 分类热度对比图
    new Chart(document.getElementById('categoryHotChart'), {
        type: 'bar',
        data: {
            labels: categoryHotData.map(d => d.name),
            datasets: [{
                label: '平均热度',
                data: categoryHotData.map(d => d.avgHot),
                backgroundColor: '#dc3545'
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>
</body>
</html>